React `useActionState` apguve: Galīgais ceļvedis modernai veidlapu un darbību apstrādei

Tīmekļa izstrādes ainavā, kas nepārtraukti attīstās, React turpina ieviest jaudīgus rīkus, kas pilnveido lietotāja saskarnes veidošanas veidu. Viena no nozīmīgākajām jaunākajām pievienojām, nostiprinot savu vietu React 19, ir `useActionState` hook. Agrāk eksperimentālajās versijās pazīstams kā `useFormState`, šis hook ir daudz vairāk nekā tikai veidlapu utilīta; tā ir fundamentāla maiņa veidā, kā mēs pārvaldām stāvokli, kas saistīts ar asinhronām operācijām.

Šis visaptverošais ceļvedis jūs aizvedīs no pamatkonceptiem līdz padziļinātām shēmām, demonstrējot, kāpēc `useActionState` ir spēles mainītājs datu mutāciju, servera komunikācijas un lietotāja atgriezeniskās saites apstrādē mūsdienīgās React lietojumprogrammās. Neatkarīgi no tā, vai veidojat vienkāršu kontaktu veidlapu vai sarežģītu, uz datiem balstītu vadības paneli, šī hook apguve ievērojami vienkāršos jūsu kodu un uzlabos lietotāja pieredzi.

Galvenā problēma: Tradicionālās darbību stāvokļa pārvaldības sarežģītība

Pirms iedziļināmies risinājumā, novērtēsim problēmu. Gadiem ilgi, apstrādājot stāvokli ap vienkāršu veidlapas iesniegšanu vai API izsaukumu, tika izmantots paredzams, bet apgrūtinošs modelis, izmantojot `useState` un `useEffect`. Izstrādātāji visā pasaulē ir neskaitāmas reizes rakstījuši šo standarta kodu.

Apsveriet standarta pieteikšanās veidlapu. Mums ir jāpārvalda:

• Veidlapas ievades vērtības (e-pasts, parole).
• Ielādes vai gaidošais stāvoklis, lai atspējotu iesniegšanas pogu un nodrošinātu atgriezenisko saiti.
• Kļūdas stāvoklis, lai parādītu ziņojumus no servera (piemēram, "Nederīgi akreditācijas dati").
• Veiksmīgs stāvoklis vai dati no veiksmīgas iesniegšanas.

"Pirms" piemērs: Izmantojot `useState`

Tipiska implementācija varētu izskatīties šādi:

            
// A traditional approach without useActionState
import { useState } from 'react';

// A mock API function
async function loginUser(email, password) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (email === 'user@example.com' && password === 'password123') {
        resolve({ success: true, message: 'Welcome back!' });
      } else {
        reject(new Error('Invalid email or password.'));
      }
    }, 1500);
  });
}

function TraditionalLoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsLoading(true);
    setError(null);

    try {
      const result = await loginUser(email, password);
      // Handle successful login, e.g., redirect or show success message
      alert(result.message);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    

      
Login (Traditional)
      {error && 
{error}
}
      

        Email:
         setEmail(e.target.value)} 
          required 
        />
      
      

        Password:
         setPassword(e.target.value)} 
          required 
        />
      
      
        {isLoading ? 'Logging in...' : 'Log In'}
      
    
  );
}

            

              
                Copy
              
            
          

Šis kods darbojas, taču tam ir vairāki trūkumi:

• Standarta kods: Mums ir nepieciešami trīs atsevišķi `useState` izsaukumi (`error`, `isLoading` un katrai ievadei), lai pārvaldītu darbības dzīves ciklu.
• Manuāla stāvokļa pārvaldība: Mēs esam atbildīgi par manuālu `isLoading` iestatīšanu uz true, pēc tam uz false `finally` blokā un iepriekšējo kļūdu notīrīšanu jaunas iesniegšanas sākumā. Tas ir kļūdains.
• Savienojums: Iesniegšanas loģika ir cieši saistīta komponenta notikumu apstrādātājā.

Ieviešam `useActionState`: Paradigmas maiņa vienkāršībā

`useActionState` ir React Hook, kas paredzēts darbības stāvokļa pārvaldībai. Tas eleganti apstrādā gaidīšanas, pabeigšanas un kļūdu ciklu, samazinot standarta kodu un veicinot tīrāku, deklaratīvāku kodu.

Izpratne par Hook parakstu

Hook sintakse ir vienkārša un jaudīga:

const [state, formAction] = useActionState(action, initialState);

• `action`: Asinhrona funkcija, kas veic vēlamo operāciju (piemēram, API izsaukums, servera darbība). Tā saņem iepriekšējo stāvokli un jebkādus darbībai specifiskus argumentus (piemēram, veidlapas datus) un tai jāatgriež jaunais stāvoklis.
• `initialState`: `state` vērtība, pirms darbība vispār ir izpildīta.
• `state`: Pašreizējais stāvoklis. Tas sākumā satur `initialState`, un pēc darbības izpildes tas satur darbības atgriezto vērtību. Šeit jūs glabāsit veiksmes ziņojumus, kļūdu detaļas vai validācijas atgriezenisko saiti.
• `formAction`: Jauna, aptīta jūsu `action` funkcijas versija. Jūs nododat šo funkciju savam `
  ` prop vai pogas `onClick`. React pārvalda jūsu sākotnējās darbības izsaukšanu ar pareizajiem argumentiem, kad tiek izsaukta šī aptīta funkcija.

"Pēc" piemērs: Refaktorings ar `useActionState`

Refaktorēsim mūsu pieteikšanās veidlapu. Ievērojiet, cik daudz tīrāks un mērķtiecīgāks kļūst komponents.

            
import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';

// The action function is now defined outside the component.
// It receives the previous state and the form data.
async function loginAction(previousState, formData) {
  const email = formData.get('email');
  const password = formData.get('password');

  // Simulate network delay
  await new Promise(resolve => setTimeout(resolve, 1500));

  if (email === 'user@example.com' && password === 'password123') {
    return { success: true, message: 'Login successful! Welcome.' };
  } else {
    return { success: false, message: 'Invalid email or password.' };
  }
}

// A separate component to show the pending state.
// This is a key pattern for separation of concerns.
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Logging in...' : 'Log In'}
    
  );
}

function ActionStateLoginForm() {
  const initialState = { success: false, message: null };
  const [state, formAction] = useActionState(loginAction, initialState);

  return (
    
      
Login (with useActionState)
      {!state.success && state.message && (
        
{state.message}
      )}
      {state.success && (
        
{state.message}
      )}
      

        Email:
        
      
      

        Password:
        
      
      
    
  );
}

            

              
                Copy
              
            
          

Uzlabojumi ir nekavējoties acīmredzami:

• Nulla manuāla stāvokļa pārvaldība: Mēs vairs paši nepārvaldām `isLoading` vai `error` stāvokļus. React to apstrādā iekšēji.
• Atdalīta loģika: `loginAction` funkcija tagad ir tīra, atkārtoti lietojama funkcija, ko var testēt izolēti.
• Deklaratīva UI: Komponenta JSX deklaratīvi atveido UI, pamatojoties uz hook atgriezto `state`. Ja `state.message` pastāv, mēs to parādām.
• Vienkāršots gaidošais stāvoklis: Mēs esam ieviesuši `useFormStatus`, pavadošo hook, kas padara gaidošās UI apstrādi triviālu.

Galvenās `useActionState` funkcijas un priekšrocības

1. Vienmērīga gaidošā stāvokļa pārvaldība ar `useFormStatus`

Viena no jaudīgākajām šīs shēmas funkcijām ir tās integrācija ar `useFormStatus` hook. `useFormStatus` sniedz informāciju par vecāka `

            
async function advancedSignupAction(prevState, formData) {
  const email = formData.get('email');
  const password = formData.get('password');
  const errors = {};

  if (!email || !email.includes('@')) {
    errors.email = 'Please enter a valid email address.';
  }

  if (!password || password.length < 8) {
    errors.password = 'Password must be at least 8 characters long.';
  }

  if (Object.keys(errors).length > 0) {
    return { success: false, message: 'Please correct the errors below.', errors };
  }

  // Simulate API call
  await new Promise(res => setTimeout(res, 1000));

  // On success
  return { success: true, message: 'Account created successfully!', errors: null };
}

function SignupForm() {
  const initialState = { success: false, message: null, errors: null };
  const [state, formAction] = useActionState(advancedSignupAction, initialState);

  return (
    
      
Sign Up
      {state.message && (
        

          {state.message}
        
      )}
      

        Email:
        
        {state.errors?.email && 
{state.errors.email}
}
      
      

        Password:
        
        {state.errors?.password && 
{state.errors.password}
}
      
      
    
  );
}

            

              
                Copy
              
            
          

Šis modelis ir neticami jaudīgs sarežģītām veidlapām. Serveris (vai klienta puses validācijas funkcija) ir vienīgais patiesības avots validācijas loģikai, un komponents vienkārši atveido atgriezenisko saiti, kas sniegta `state` objektā.

3. Izstrādāts progresīvai uzlabošanai un servera darbībām

`useActionState` ir stūrakmens React vīzijai par servera darbībām, īpaši ietvaros, piemēram, Next.js. Servera darbība ir funkcija, ko definējat serverī, bet varat izsaukt tieši no klienta komponentiem.

Kad jūs izmantojat `useActionState` ar servera darbību, React nodrošina progresīvu uzlabošanu. Tas nozīmē:

• Ja JavaScript ir iespējots, veidlapas iesniegšana notiek klientā bez pilnīgas lapas pārlādes, nodrošinot vienmērīgu vienas lapas lietojumprogrammas (SPA) pieredzi.
• Ja JavaScript ir atspējots vai neizdodas ielādēties, `
  ` joprojām darbosies, izmantojot pārlūkprogrammas iebūvēto HTML veidlapas iesniegšanas mehānismu.

Tas ir liels ieguvums pieejamībai un noturībai, nodrošinot, ka jūsu lietojumprogramma ir izmantojama globālai auditorijai ar dažādiem tīkla apstākļiem un ierīces iespējām.

            
// In a Next.js App Router file (e.g., app/actions.js)
'use server';

export async function createPost(prevState, formData) {
  const title = formData.get('title');

  // ... logic to save the post to a database ...
  
  if (title.length < 5) {
    return { message: 'Title is too short.' };
  }

  // In a real app, you would revalidate data here
  // revalidatePath('/posts');
  return { message: 'Post created!' };
}

// In your client component (e.g., app/page.js)
import { useActionState } from 'react';
import { createPost } from './actions';

function NewPostForm() {
  const [state, formAction] = useActionState(createPost, { message: null });

  return (
    
      
      Create Post
      {state.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

Uzlaboti modeļi un lietošanas gadījumi

Pāri veidlapām: `useActionState` izmantošana jebkurai asinhronai darbībai

Neskatoties uz tās izcelsmi kā `useFormState`, hook nav ierobežots tikai ar `

            
async function deleteItemAction(prevState, itemId) {
  // Simulate an API call to delete an item
  console.log(`Deleting item with ID: ${itemId}`);
  await new Promise(res => setTimeout(res, 1000));
  const isSuccess = Math.random() > 0.2; // Simulate potential failure

  if (isSuccess) {
    return { success: true, message: `Item ${itemId} deleted.` };
  } else {
    return { success: false, message: 'Failed to delete item. Please try again.' };
  }
}

function DeletableItem({ id }) {
  const [state, deleteAction] = useActionState(deleteItemAction, { message: null });
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      deleteAction(id);
    });
  };

  return (
    

      Item {id}
      
        {isPending ? 'Deleting...' : 'Delete'}
      
      {state.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

            
import { useActionState, useOptimistic, useRef } from 'react';

async function sendMessageAction(prevState, formData) {
  const sentMessage = formData.get('message');
  await new Promise(res => setTimeout(res, 2000)); // Simulate slow network
  // In a real app, this would be your API call
  // For this demo, we'll assume it always succeeds
  return { text: sentMessage, sending: false };
}

function MessageList() {
  const formRef = useRef();
  const [messages, setMessages] = useState([{ text: 'Hello!', sending: false }]);
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (currentMessages, newMessageText) => [
      ...currentMessages,
      { text: newMessageText, sending: true }
    ]
  );

  const formAction = async (formData) => {
    const newMessageText = formData.get('message');
    addOptimisticMessage(newMessageText);
    formRef.current.reset(); // Reset form visually
    const result = await sendMessageAction(null, formData);
    // Update the final state
    setMessages(current => [...current, result]);
  };

  return (
    

      
Chat
      

        {optimisticMessages.map((msg, index) => (
          

            {msg.text} {msg.sending && (Sending...)}
          
        ))}
      
      
        
        Send
      
    
  );
}

            

              
                Copy
              
            
          

Šajā sarežģītākajā piemērā mēs redzam, kā `useOptimistic` nekavējoties pievieno ziņojumu ar atzīmi "(Sūta...)". Pēc tam `formAction` izpilda faktisko asinhrono operāciju. Kad tā ir pabeigta, tiek atjaunināts galīgais stāvoklis. Ja darbība neizdotos, React automātiski atceltu optimistisko stāvokli un atgrieztos pie sākotnējā `messages` stāvokļa.

`useActionState` pret `useState`: Kad izvēlēties kuru

Ar šo jauno rīku rodas bieži uzdots jautājums: kad man joprojām vajadzētu izmantot `useState`?

• Izmantojiet `useState` šādiem gadījumiem:
  • Tīri klienta puses, sinhronai UI stāvoklim: Padomājiet par modāla pārslēgšanu, pašreizējās cilnes pārvaldību cilņu grupā vai kontrolētu komponentu ievades apstrādi, kas tieši neiedarbina servera darbību.
  • Stāvoklis, kas nav tiešs darbības rezultāts: Piemēram, filtru iestatījumu glabāšana, kas tiek lietoti klienta pusē.
  • Vienkāršas stāvokļa mainīgās: Skaitītājs, Būla karogs, virkne.
• Izmantojiet `useActionState` šādiem gadījumiem:
  • Stāvoklis, kas tiek atjaunināts veidlapas iesniegšanas vai asinhronas darbības rezultātā: Tas ir tā primārais lietošanas gadījums.
  • Ja jums ir jāseko līdzi operācijas gaidīšanas, veiksmes un kļūdu stāvokļiem: Tas lieliski ietver visu šo dzīves ciklu.
  • Integrācija ar React Server Actions: Tas ir būtisks klienta puses hook darbam ar servera darbībām.
  • Veidlapas, kurām nepieciešama servera puses validācija un atgriezeniskā saite: Tas nodrošina tīru kanālu serverim, lai atgrieztu strukturētas validācijas kļūdas klientam.

Globālās labākās prakses un apsvērumi

Veidojot lietojumprogrammas globālai auditorijai, ir svarīgi ņemt vērā faktorus, kas pārsniedz koda funkcionalitāti.

Pieejamība (a11y)

Parādot veidlapu kļūdas, nodrošiniet, lai tās būtu pieejamas lietotājiem, kuri izmanto palīgtehnoloģijas. Izmantojiet ARIA atribūtus, lai dinamiski paziņotu par izmaiņām.

            
// In your form component
const { errors } = state;

// ...


{errors?.email && (
  

    {errors.email}
  
)}

            

              
                Copy
              
            
          

Atribūts `aria-invalid="true"` signalizē ekrāna lasītājiem, ka ievadei ir kļūda. `role="alert"` kļūdas ziņojumā nodrošina, ka tas tiek paziņots lietotājam, tiklīdz tas parādās.

Internacionalizācija (i18n)

Izvairieties no cietkoda kļūdu virkņu atgriešanas no jūsu darbībām, īpaši daudzvalodu lietojumprogrammā. Tā vietā atgrieziet kļūdu kodus vai atslēgas, ko var kartēt uz tulkotām virknēm klienta pusē.

            
// Action on the server
async function internationalizedAction(prevState, formData) {
  // ...validation logic...
  if (password.length < 8) {
    return { success: false, error: { code: 'ERROR_PASSWORD_TOO_SHORT' } };
  }
  // ...
}

// Component on the client
import { useTranslation } from 'react-i18next';

function I18nForm() {
  const { t } = useTranslation();
  const [state, formAction] = useActionState(internationalizedAction, {});

  return (
    

      {/* ... inputs ... */}
      {state.error && (
        

          {t(state.error.code)} // Maps 'ERROR_PASSWORD_TOO_SHORT' to 'Password must be at least 8 characters long.'
        
      )}
      
    
  );
}

            

              
                Copy
              
            
          

Tipa drošība ar TypeScript

TypeScript izmantošana ar `useActionState` nodrošina izcilu tipa drošību, novēršot kļūdas, pirms tās rodas. Jūs varat definēt tipus savas darbības stāvoklim un datiem.

            
import { useActionState } from 'react';

// 1. Define the state shape
type FormState = {
  success: boolean;
  message: string | null;
  errors?: {
    email?: string;
    password?: string;
  } | null;
};

// 2. Define the action function's signature
type SignupAction = (prevState: FormState, formData: FormData) => Promise;

const signupAction: SignupAction = async (prevState, formData) => {
  // ... implementation ...
  // TypeScript will ensure you return a valid FormState object
  return { success: false, message: 'Invalid.', errors: { email: '...' } };
};

function TypedSignupForm() {
  const initialState: FormState = { success: false, message: null, errors: null };

  // 3. The hook infers the types correctly
  const [state, formAction] = useActionState(signupAction, initialState);

  // Now, `state` is fully typed. `state.errors.email` will be type-checked.
  return (
    

      {/* ... */}
    
  );
}

            

              
                Copy
              
            
          

Secinājums: Stāvokļa pārvaldības nākotne React

`useActionState` hook ir vairāk nekā tikai ērtība; tas ir React attīstošās filozofijas pamatā. Tas virza izstrādātājus uz skaidrāku interešu nodalīšanu, noturīgākām lietojumprogrammām, izmantojot progresīvu uzlabošanu, un deklaratīvāku veidu, kā apstrādāt lietotāja darbību rezultātus.

Centralizējot darbības loģiku un tās rezultējošo stāvokli, `useActionState` novērš ievērojamu klienta puses standarta koda un sarežģītības avotu. Tas nevainojami integrējas ar `useFormStatus` gaidīšanas stāvokļiem un `useOptimistic` uzlabotai lietotāja pieredzei, veidojot jaudīgu trio mūsdienīgiem datu mutācijas modeļiem.

Veidojot jaunas funkcijas vai refaktorējot esošās, apsveriet `useActionState` izmantošanu ikreiz, kad pārvaldāt stāvokli, kas tieši izriet no asinhronas operācijas. Tas novedīs pie tīrāka, robustāka koda, kas lieliski saskan ar React nākotnes virzienu.